<template>
    <div>
        {{ name }}  
        <!-- ref在html调用中可以直接调用,但是在函数中需要使用obj.value获取值 -->
        <input type="text" ref="myinput">
        <button @click="handleClick">click</button>
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    setup() {  //setup中this会丢失
        const name = ref('张三')  //new Proxy{{value:'张三}}
        const handleClick = () => {
            console.log(myinput.value);  //在标签上引用ref并绑定一个变量,obj.value可以获取obj的原生dom
            name.value = '李四'   //使用obj.value获取name值
        }
        const myinput = ref('李四');
        return {
            name, myinput,
            handleClick, 
        }

    }
}
</script>